<template>
  <div id="app1">
    <el-table
      :data="renderDynamic"
      ref="product"
      
      row-key="id"
      :row-class-name="rowClassNameFun"
      :header-row-class-name="headerRowClassName"
      size="mini"
      max-height="500px"
      style="width: 100%"
      default-expand-all
      @select="selectFun"
      @select-all="selectAllFun"
      :header-cell-style="{ background: '#fafafa' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
          <span class="disSpan id">{{ scope.row.id }}</span>
          <span class="disSpan parentId">{{ scope.row.parentId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="其他" width="250">
        <!-- :v-if="children.otherList" -->
        <template slot-scope="scope" >
          <!-- <span>{{scope.row.otherList}}</span> -->
          <!-- <el-checkbox v-model="item.checked" v-for="item in scope.row.otherList" :key="item.id" :disabled="flag"> -->
          <el-checkbox
            v-model="item.checked"
            v-for="item in scope.row.otherList"
            :key="item.id"
            :attr="scope.row.id"
          >
            {{ item.name }}
          </el-checkbox>
        </template>
      </el-table-column>
    </el-table>

    <el-button @click="setArrytest">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: "testThree",

  data() {
    return {
      // demo:[

      // ],
      renderDynamic: [
        {
          id: 1,
          parentId: 0,
          name: "王小虎1",
          isSelect: "1",
          children: [
            {
              id: 77,
              parentId: 1,
              name: "王小虎3",
              isSelect: "1",
              otherList: [
                {
                  oId: 771,
                  name: "虎31",
                  checked: false,
                },
                {
                  oId: 772,
                  name: "虎32",
                  checked: false,
                },
                {
                  oId: 773,
                  name: "虎33",
                  checked: true,
                },
              ],
            },
          ],
        },
        {
          id: 2,
          parentId: 0,
          name: "王小虎2",
          isSelect: "0",
          children: [
            {
              id: 3,
              parentId: 2,
              name: "王小虎3",
              otherList: [
                {
                  oId: 1,
                  name: "test1",
                  checked: false,
                },
                {
                  oId: 2,
                  name: "test2",
                  checked: false,
                },
                {
                  oId: 3,
                  name: "test3",
                  checked: true,
                },
              ],
            },
            {
              id: 6,
              parentId: 2,
              name: "王小虎6",
              otherList: [
                {
                  oId: 21,
                  name: "test4",
                  checked: false,
                },
                {
                  oId: 22,
                  name: "test5",
                  checked: false,
                },
                {
                  oId: 23,
                  name: "test6",
                  checked: true,
                },
              ],
            },
          ],
        },
        {
          id: 7,
          parentId: 0,
          name: "王名1",
        },
      ],
      nList: [],
      flag: true,
    };
  },
  mounted() {
    // this.initData(this.renderDynamic);
    this.initData2(this.renderDynamic)
  },
  methods: {
    setArrytest() {
      console.log(this.nList, "新list");
      var obj = {};
      let that = this;
      function deWeightFour() {
        that.nList = that.nList.reduce(function(a, b) {
          obj[b.id] ? "" : (obj[b.id] = true && a.push(b));
          return a;
        }, []);
        return that.nList;
      }
      var newArr4 = deWeightFour();
      console.log(newArr4, "newArr4");
      let newArrLast = [];
      newArr4.forEach((ele) => {
        if (ele.parentId !== 0) {
          newArrLast.push(ele);
        }
      });
      console.log(newArrLast, "newArrLastnewArrLastnewArrLast");
    },
    aabb(data, cId) {
      data.forEach((item) => {
        if (item.id == cId) {
          this.nList.push(item);
          // console.log(111);
        }
        if (item.children && item.children.length) {
          this.aabb(item.children, cId);
        }
      });
    },
    handleSelectionChange() {
      var newList = [];
      this.nList = [];
      var cid;
      setTimeout(() => {
        var aa = document.querySelectorAll(".el-checkbox__input");

        console.log(aa, "aa");

        aa.forEach((element) => {
          if (
            element.classList[1] == "is-checked" &&
            element.parentNode.parentNode.parentNode.classList.length == 2
          ) {
            // console.log(element.parentNode.parentNode.parentNode.classList,"baba")
            // var parentId = element.parentNode.parentNode.parentNode.parentNode.children[1].children[0].lastChild.innerHTML
            cid =
              element.parentNode.parentNode.parentNode.parentNode.children[1]
                .children[0].lastChild.previousSibling.innerHTML;
            // console.log(element.parentNode.parentNode.parentNode.parentNode.children[1].children[0].lastChild.innerHTML,"hha1");
            console.log(
              element.parentNode.parentNode.parentNode.parentNode.children[1]
                .children[0].lastChild.previousSibling.innerHTML,
              "hha2"
            );
            console.log(
              element.parentNode.parentNode.parentNode.parentNode.children[2]
                .children[0].children,
              "element.parentNode.attr"
            );
            // let attrArry = element.parentNode.parentNode.parentNode.parentNode.children[2].children[0].children
            // if(attrArry.length){
            //   attrArry.forEach(ele => {
            //     // console.log(ele.disabled,'ele.disabled');.classList.remove("类名")
            //     if(ele.attributes[1].nodeValue === cid){
            //       console.log(ele.children[0].children[1],'7897897897989');
            //       ele.children[0].classList.remove("is-disabled")
            //       ele.children[0].children[1].classList.remove("is-disabled")
            //       ele.children[0].children[1].disabled = false
            //     }
            //   });
            // }
            this.aabb(this.renderDynamic, parseInt(cid));
            newList.push(cid);
          }
        });
      }, 300);

      console.log(newList, "新数组");
      // console.log(this.nList,"newList");
      var ll = [];
      this.renderDynamic.forEach((ite) => {
        // console.log(ite.children,"ch");
        if (ite.children && ite.children.length) {
          ite.children.forEach((i) => {
            if (i.otherList && i.otherList.length) {
              ll.push(i.id);
            }
          });
        }
      });
      setTimeout(() => {
        console.log(cid, "cid");
        ll.forEach((jte) => {
          console.log(jte + "", "flag");
          if (newList.includes(jte + "")) {
            this.flag = false;
          } else {
            this.flag = true;
          }
        });
      }, 301);
    },
    initData(data) {
      data.forEach((item) => {
        item.isSelect = false; //默认为不选中
        if (item.children && item.children.length) {
          this.initData(item.children);
        }
      });
    },
    initData2(data) {
      console.log(data);
      data.forEach((item, index) => {
        item.isSelect = item.isSelect === "1" ? true : false; //默认为不选中
        if (item.isSelect) {
          this.$refs.product.toggleRowSelection(data[index]);
        }

        if (item.children && item.children.length) {
          this.initData2(item.children);
        }
      });
    },
    selectFun(selection, row) {
      this.setRowIsSelect(row);
    },
    checkIsAllSelect() {
      this.oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        this.oneProductIsSelect.push(item.isSelect);
      });
      //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
      let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },
    selectAllFun(selection) {
      let isAllSelect = this.checkIsAllSelect();
      this.renderDynamic.forEach((item) => {
        item.isSelect = isAllSelect;
        this.$refs.product.toggleRowSelection(item, !isAllSelect);
        this.selectFun(selection, item);
      });
    },
    rowClassNameFun({ row }) {
      if (row.isSelect === "") {
        return "indeterminate";
      }
    },
    headerRowClassName({ row }) {
      console.log("row: ", row);
      let oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      if (oneProductIsSelect.includes("")) {
        return "indeterminate";
      }
      return "";
    },
    setRowIsSelect(row) {
      //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === "") {
        row.isSelect = false;
        this.$refs.product.toggleRowSelection(row, true);
      }
      row.isSelect = !row.isSelect;
      let that = this;

      function selectAllChildrens(data) {
        data.forEach((item) => {
          item.isSelect = row.isSelect;
          that.$refs.product.toggleRowSelection(item, row.isSelect);
          if (item.children && item.children.length) {
            selectAllChildrens(item.children);
          }
        });
      }

      function getSelectStatus(selectStatuaArr, data) {
        data.forEach((childrenItem) => {
          selectStatuaArr.push(childrenItem.isSelect);
          if (childrenItem.children && childrenItem.children.length) {
            getSelectStatus(selectStatuaArr, childrenItem.children);
          }
        });
        return selectStatuaArr;
      }
      function getLevelStatus(row) {
        //如果当前节点的parantId =0 并且有子节点，则为1
        //如果当前节点的parantId !=0 并且子节点没有子节点 则为3
        if (row.parentId == 0) {
          if (row.children && row.children.length) {
            return 1;
          } else {
            return 4;
          }
        } else {
          if (!row.children || !row.children.length) {
            return 3;
          } else {
            return 2;
          }
        }
      }
      let result = {};
      //获取明确的节点
      function getExplicitNode(data, parentId) {
        data.forEach((item) => {
          if (item.id == parentId) {
            result = item;
          }
          if (item.children && item.children.length) {
            getExplicitNode(item.children, parentId);
          }
        });
        return result;
      }
      function operateLastLeve(row) {
        //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        let selectStatuaArr = [];
        let item = getExplicitNode(that.renderDynamic, row.parentId);
        selectStatuaArr = getSelectStatus(selectStatuaArr, item.children);
        if (
          selectStatuaArr.every((selectItem) => {
            return true == selectItem;
          })
        ) {
          item.isSelect = true;
          that.$refs.product.toggleRowSelection(item, true);
        } else if (
          selectStatuaArr.every((selectItem) => {
            return false == selectItem;
          })
        ) {
          item.isSelect = false;
          that.$refs.product.toggleRowSelection(item, false);
        } else {
          // item.isSelect = "";
           item.isSelect = true;
          that.$refs.product.toggleRowSelection(item, true);
        }
        //则还有父级
        if (item.parentId != 0) {
          operateLastLeve(item);
        }
      }
      //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选

      //1、只是父级 2、既是子集，又是父级 3、只是子级
      let levelSataus = getLevelStatus(row);
      if (levelSataus == 1) {
        selectAllChildrens(row.children);
      } else if (levelSataus == 2) {
        selectAllChildrens(row.children);
        operateLastLeve(row);
      } else if (levelSataus == 3) {
        operateLastLeve(row);
      }
    },
  },
};
</script>

<style lang='scss' scoped>
::v-deep .expanded{
  // background: #60ff40 !important;
  // color: #fff;
}
#app1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: scale(0.5);
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #f2f6fc;
  border-color: #dcdfe6;
}
.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  border-color: #c0c4cc !important;
  background-color: #c0c4cc;
}
.product-show th .el-checkbox__inner {
  display: none !important;
}

.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}
.product-show .el-checkbox__inner {
  display: block !important;
}

.product-show .el-checkbox {
  display: block !important;
}
.disSpan {
  display: none !important;
  /* opacity: 0; */
}

</style>
